<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }
    </style>
</head>

<body>
    <button>动画</button>
    <div class="box" style="left: 0px"></div>

    <script>
        var btn = document.getElementsByTagName("button")[0];
        var div = document.getElementsByTagName("div")[0];

        //1、闪动
        //    btn.onclick = function () {
        //        div.style.left = "500px";
        //    }

        //2、匀速运动
        btn.onclick = function () {
            //定时器，每隔一定的时间向右走一些
            setInterval(function () {
                console.log(parseInt(div.style.left));
                //动画原理： 盒子未来的位置 = 盒子现在的位置 + 步长；
                //方法1：用offsetLeft获取值，用style.left赋值。
                div.style.left = div.offsetLeft + 1 + 'px';

                // 方法2：必须一开始就在DOM节点上添加 style="left: 0px;"属性，才能用方法2。否则， div.style.left 的值为 NaN
                // div.style.left = parseInt(div.style.left)+100+"px";  //方法2：
            }, 500);
        };
    </script>
</body>

</html>